<%--
  Created by IntelliJ IDEA.
  User: feng
  Date: 2023/5/31
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <title>测试 ECharts</title>

  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/plugins/elementui/index.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/login.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/js/common.js">
  <script src="<%=request.getContextPath()%>/resources/jquery/jquery.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/vue.js"></script>
  <script src="<%=request.getContextPath()%>/resources/plugins/elementui/index.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 80%;height:100%;"></div>


</body>

<script type="text/javascript">
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  var dataMap = {};


  function dataFormatter(obj) {
    // prettier-ignore
    var pList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var temp = [];
    var y = new Date().getFullYear()-9;
    for (var year = y; year <= y+9; year++) {
      var max = 0;
      var sum = 0;
      temp = obj[year];
      for (var i = 0, l = temp.length; i < l; i++) {
        max = Math.max(max, temp[i]);
        sum += temp[i];
        obj[year][i] = {
          name: pList[i],
          value: temp[i]
        };
      }
      obj[year + 'max'] = Math.floor(max / 100) * 100;
      obj[year + 'sum'] = sum;
    }
    return obj;
  }

  function dataFormatter01(obj) {
    // prettier-ignore
    var pList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var temp;
    var y = new Date().getFullYear()-9;
    for (var year = y; year <= y+9; year++) {
      var max = 0;
      var sum = 0;
      temp = obj[year];
      for (var i = 0, l = temp.length; i < l; i++) {
        max = Math.max(max, temp[i]);
        sum += temp[i];
        obj[year][i] = {
          name: pList[i],
          value: temp[i]
        };
      }
      obj[year + 'max'] = Math.floor(max / 100) * 100;
      obj[year + 'sum'] = sum;
    }
    return obj;
  }

  $.ajax({
    type:"post",
    url:'<%=request.getContextPath()%>/fundStatistics/findSite',
    contentType:"application/json",
    data:"",
    success:function (result1) {
      dataMap.dataInAll = dataFormatter01(result1);
      createOption();
      option && myChart.setOption(option);
    }
  });

  // prettier-ignore
  dataMap.dataInAll = dataFormatter({
    //max : 60000,
    2023: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2022: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2021: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2020: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2019: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2018: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2017: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2016: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2015: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2014: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
  });
  // prettier-ignore
  dataMap.dataOutAll = dataFormatter({
    //max : 4000,
    2023: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2022: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2021: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2020: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2019: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2018: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2017: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2016: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2015: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2014: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
  });
  // prettier-ignore
  dataMap.dataProfit = dataFormatter({
    //max : 26600,
    2023: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38],
    2022: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2021: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2020: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2019: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2018: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2017: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2016: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2015: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2014: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38],
  });
  // prettier-ignore
  dataMap.dataSite = dataFormatter({
    //max : 25000,
    2023: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2022: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2021: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2020: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2019: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2018: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2017: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2016: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2015: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31],
    2014: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38],
  });
  // prettier-ignore
  dataMap.dataEequipment = dataFormatter({
    //max : 3600,
    2023: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2022: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2021: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2020: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2019: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2018: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2017: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2016: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2015: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
    2014: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92],
  });
  // prettier-ignore
  dataMap.dataUserAll = dataFormatter({
    //max : 3200,
    2023: [2215.41, 756.5, 746.01, 519.32, 447.46, 755.57, 207.65, 370.78, 2277.4, 2600.11, 2730.29, 503.85],
    2022: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2021: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2020: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2019: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96],
    2018: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65],
    2017: [ 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24],
    2016: [ 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24],
    2015: [2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24],
    2014: [928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38, 9069.2],
  });

  function createOption(){
    option = {
    baseOption: {
      timeline: {
        axisType: 'category',
        // realtime: false,
        // loop: false,
        autoPlay: true,
        // currentIndex: 2,
        playInterval: 1000,
        // controlStyle: {
        //     position: 'left'
        // },
        data: [
          '2014-01-01',
          '2015-01-01',
          '2016-01-01',
          '2017-01-01',
          '2018-01-01',
          '2019-01-01',
          '2020-01-01',
          '2021-01-01',
          '2022-01-01',
          '2023-01-01',
        ],
        label: {
          formatter: function (s) {
            return new Date(s).getFullYear();
          }
        }
      },
      title: {
        subtext: '数据来广东海洋大学体育馆管理'
      },
      tooltip: {},
      legend: {
        left: 'right',
        data: ['场地收入', '器材收入', '用户总余额', '总收入', '总支出', '纯利润'],
        selected: {
          总收入: false,
          总支出: false,
          纯利润: false
        }
      },
      calculable: true,
      grid: {
        top: 80,
        bottom: 100,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              formatter: function (params) {
                return params.value.replace('\n', '');
              }
            }
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: { interval: 0 },
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          splitLine: { show: false }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '（元）'
        }
      ],
      series: [
        { name: '总收入', type: 'bar' },
        { name: '总支出', type: 'bar' },
        { name: '纯利润', type: 'bar' },
        { name: '场地收入', type: 'bar' },
        { name: '器材收入', type: 'bar' },
        { name: '用户总余额', type: 'bar' },
        {
          name: '总收入占比',
          type: 'pie',
          center: ['90%', '20%'],
          radius: '20%',
          z: 100
        }
      ]
    },
    options: [
      {
        title: { text: '2014资金流水' },
        series: [
          { data: dataMap.dataInAll['2014'] },
          { data: dataMap.dataUserAll['2014'] },
          { data: dataMap.dataEequipment['2014'] },
          { data: dataMap.dataOutAll['2014'] },
          { data: dataMap.dataProfit['2014'] },
          { data: dataMap.dataSite['2014'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2014sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2014sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2014sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2015资金流水' },
        series: [
          { data: dataMap.dataInAll['2015'] },
          { data: dataMap.dataUserAll['2015'] },
          { data: dataMap.dataEequipment['2015'] },
          { data: dataMap.dataOutAll['2015'] },
          { data: dataMap.dataProfit['2015'] },
          { data: dataMap.dataSite['2015'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2015sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2015sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2015sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2016资金流水' },
        series: [
          { data: dataMap.dataInAll['2016'] },
          { data: dataMap.dataUserAll['2016'] },
          { data: dataMap.dataEequipment['2016'] },
          { data: dataMap.dataOutAll['2016'] },
          { data: dataMap.dataProfit['2016'] },
          { data: dataMap.dataSite['2016'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2016sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2016sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2016sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2017资金流水' },
        series: [
          { data: dataMap.dataInAll['2017'] },
          { data: dataMap.dataUserAll['2017'] },
          { data: dataMap.dataEequipment['2017'] },
          { data: dataMap.dataOutAll['2017'] },
          { data: dataMap.dataProfit['2017'] },
          { data: dataMap.dataSite['2017'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2017sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2017sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2017sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2018资金流水' },
        series: [
          { data: dataMap.dataInAll['2018'] },
          { data: dataMap.dataUserAll['2018'] },
          { data: dataMap.dataEequipment['2018'] },
          { data: dataMap.dataOutAll['2018'] },
          { data: dataMap.dataProfit['2018'] },
          { data: dataMap.dataSite['2018'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2018sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2018sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2018sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2019资金流水' },
        series: [
          { data: dataMap.dataInAll['2019'] },
          { data: dataMap.dataUserAll['2019'] },
          { data: dataMap.dataEequipment['2019'] },
          { data: dataMap.dataOutAll['2019'] },
          { data: dataMap.dataProfit['2019'] },
          { data: dataMap.dataSite['2019'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2019sum'] },
              { name: '器材收入', value: dataMap.dataProfit['20195sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2019sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2020资金流水' },
        series: [
          { data: dataMap.dataInAll['2020'] },
          { data: dataMap.dataUserAll['2020'] },
          { data: dataMap.dataEequipment['2020'] },
          { data: dataMap.dataOutAll['2020'] },
          { data: dataMap.dataProfit['2020'] },
          { data: dataMap.dataSite['2020'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2020sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2020sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2020sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2021资金流水' },
        series: [
          { data: dataMap.dataInAll['2021'] },
          { data: dataMap.dataUserAll['2021'] },
          { data: dataMap.dataEequipment['2021'] },
          { data: dataMap.dataOutAll['2021'] },
          { data: dataMap.dataProfit['2021'] },
          { data: dataMap.dataSite['2021'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2021sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2021sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2021sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2022资金流水' },
        series: [
          { data: dataMap.dataInAll['2022'] },
          { data: dataMap.dataUserAll['2022'] },
          { data: dataMap.dataEequipment['2022'] },
          { data: dataMap.dataOutAll['2022'] },
          { data: dataMap.dataProfit['2022'] },
          { data: dataMap.dataSite['2022'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2022sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2022sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2022sum'] }
            ]
          }
        ]
      },
      {
        title: { text: '2023资金流水' },
        series: [
          { data: dataMap.dataInAll['2023'] },
          { data: dataMap.dataUserAll['2023'] },
          { data: dataMap.dataEequipment['2023'] },
          { data: dataMap.dataOutAll['2023'] },
          { data: dataMap.dataProfit['2023'] },
          { data: dataMap.dataSite['2023'] },
          {
            data: [
              { name: '场地收入', value: dataMap.dataOutAll['2023sum'] },
              { name: '器材收入', value: dataMap.dataProfit['2023sum'] },
              { name: '用户总余额', value: dataMap.dataSite['2023sum'] }
            ]
          }
        ]
      }
    ]
  };

  };




</script>
</html>

